<template>
    <div class="mainBox">
        <div class="search">
            <el-cascader
                v-model="caValue"
                :options="cascaders"
                @change="handleChange"
            ></el-cascader>
        </div>
        <div style="width:60%;">
            <el-table :data="tableData" style="width: 100%" max-height="800">
                <el-table-column prop="time" label="时间" align="center">
                </el-table-column>
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row.id)"
                            >编辑</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            caValue: [],
            cascaders: [],
            tableData: [],
        };
    },
    mounted() {
        this.$http
            .get("services/app/XinHaoJiService/GetXinHaoJiSelect")
            .then((res) => {
                this.cascaders = res.data.result;
                if (this.$route.query) {
                    this.caValue[0] = this.$route.query.one;
                    this.caValue[1] = this.$route.query.two;
                    this.handleChange();
                }
            });
    },
    methods: {
        handleChange() {
            this.$http
                .get(
                    "services/app/XinHaoJiService/GetAllXinHaoJiRecord?machineCode=" +
                        this.caValue[1]
                )
                .then((res) => {
                    this.tableData = res.data.result;
                });
        },
        handleEdit(id) {
            this.$router.push({
                name: "telesemeAdd",
                query: {
                    id,
                },
            });
        },
        handleDelete(id) {
            this.$http
                .delete(
                    "services/app/XinHaoJiService/DeleteGroupXinHaoJiData?recordId=" +
                        id
                )
                .then((res) => {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.handleChange();
                });
        },
    },
};
</script>

<style lang="less" scoped>
.mainBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.search {
    width: 100%;
    margin-bottom: 40px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
}
/deep/ input {
    color: #fff;
}
.el-cascader {
    /deep/ input[placeholder] {
        &::placeholder {
            color: #fff;
        }
    }
}

/deep/ input[placeholder] {
    &::placeholder {
        color: var(--color);
    }
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-table__row {
    background-color: var(--color) !important;
    &:hover {
        background-color: var(--color) !important;
    }
}
/deep/
    .el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background-color: var(--color) !important;
}
/deep/ .el-table__row:hover {
    background-color: var(--main-bgc);
}
/deep/ .el-table__header {
    background-color: var(--main-bgc) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}

/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}

/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
.el-table {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 5px;
    /deep/.el-table__row:nth-child(2n + 1) {
        // background-color: #f8f8f8 !important;
    }
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
/deep/ .el-table thead {
    color: var(--main-fc);
    // background-color: red;
    tr {
        background-color: var(--main-bgc);
    }
}
/deep/ .el-table {
    border: none;
    padding: 0;
    background-color: var(--main-bgc);
    .el-table__empty-block {
    }
    .el-table__row {
        border: none;
    }
    input {
        background-color: var(--input-bgc);
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    .el-table__body-wrapper {
        background-color: #323232 !important;
    }
    color: var(--main-fc);
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
    // border-bottom: none;
    background: none;
}
/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: var(--main-bgc);
}
</style>
